<template>
  <!-- 登录页面容器 -->
  <div class="login-container">
    <!-- 左侧展示区 -->
    <div class="left-section">
      <!-- 品牌展示区域 -->
      <div class="brand">
        <!-- 应用 logo -->
        <img src="../assets/chat-logo.png" alt="logo" class="main-logo">
        <!-- 应用名称 -->
        <h1>W-IM</h1>
        <!-- 应用标语 -->
        <p class="slogan">让聊天更简单，沟通更高效，随时随地畅享便捷交流。</p>
      </div>
      <!-- 装饰性圆圈背景 -->
      <div class="decoration">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>
      </div>
    </div>

    <!-- 右侧登录区 -->
    <div class="right-section">
      <!-- 登录表单容器 -->
      <div class="login-box">
        <!-- 欢迎标题 -->
        <h2>欢迎回来</h2>
        <p class="subtitle">请登录您的账号</p>
        
        <!-- 用户名输入框组 -->
        <div class="input-group">
          <label>
            <i class="ri-user-line"></i>
          </label>
          <input 
            type="text" 
            v-model="loginForm.username" 
            placeholder="请输入用户名"
          >
        </div>
        
        <!-- 密码输入框组 -->
        <div class="input-group">
          <label>
            <i class="ri-lock-line"></i>
          </label>
          <input 
            type="password" 
            v-model="loginForm.password" 
            placeholder="请输入密码"
          >
        </div>

        <!-- 记住密码和忘记密码区域 -->
        <div class="remember-forgot">
          <label class="remember">
            <input type="checkbox" v-model="remember">
            <span>记住密码</span>
          </label>
          <a href="#" class="forgot">忘记密码？</a>
        </div>

        <!-- 登录按钮 -->
        <button @click="handleLogin" class="login-btn">
          <span>登 录</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入所需的 Vue 组件和工具
import { ref } from 'vue'                  // 导入 ref 用于响应式数据
import { useRouter } from 'vue-router'     // 导入路由工具
import { ElMessage } from 'element-plus'   // 导入 Element Plus 的消息提示组件

// 初始化路由
const router = useRouter()

// 定义登录表单数据
const loginForm = ref({
  username: '',    // 用户名
  password: ''     // 密码
})

// 记住密码选项
const remember = ref(false)

// 获取 electron 对象
const electron = window.electron

// 处理登录逻辑
const handleLogin = async () => {
  // 检查 electron 对象是否存在
  if (!electron) {
    console.error('Electron API not available')
    return
  }

  try {
    // 发送登录请求到主进程
    electron.send('login', {
      username: loginForm.value.username,
      password: loginForm.value.password
    })

    // 监听主进程的登录响应
    electron.on('login-response', (success) => {
      if (success) {
        // 登录成功，跳转到聊天页面
        router.push('/chat')
      } else {
        // 登录失败，显示错误提示
        ElMessage.error('用户名或密码错误')
      }
    })
  } catch (error) {
    // 捕获并处理错误
    console.error('Login error:', error)
    ElMessage.error('登录失败，请重试')
  }
}
</script>

<style scoped>
/* CSS 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 登录容器样式 */
.login-container {
  display: flex;                /* 使用弹性布局 */
  height: 100vh;               /* 占满视口高度 */
  background: white;           /* 背景色为白色 */
  width: 100vw;               /* 占满视口宽度 */
  overflow: hidden;           /* 隐藏溢出内容 */
  position: fixed;            /* 固定定位 */
  top: 0;
  left: 0;
}

/* 左侧区域样式 */
.left-section {
  flex: 1;                    /* 弹性布局占比 */
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);  /* 渐变背景 */
  display: flex;              /* 使用弹性布局 */
  flex-direction: column;     /* 垂直方向排列 */
  justify-content: center;    /* 垂直居中 */
  align-items: center;        /* 水平居中 */
  position: relative;         /* 相对定位 */
  overflow: hidden;           /* 隐藏溢出内容 */
  padding: 2rem;             /* 内边距 */
}

/* 品牌区域样式 */
.brand {
  text-align: center;         /* 文字居中 */
  z-index: 2;                /* 层级提升 */
}

/* Logo 样式 */
.main-logo {
  width: 120px;              /* Logo 宽度 */
  height: 120px;             /* Logo 高度 */
  margin-bottom: 1rem;       /* 底部外边距 */
  animation: float 6s ease-in-out infinite;  /* 悬浮动画 */
}

/* 品牌标题样式 */
.brand h1 {
  color: white;              /* 文字颜色 */
  font-size: 2.5rem;         /* 字体大小 */
  margin-bottom: 1rem;       /* 底部外边距 */
}

/* 标语样式 */
.slogan {
  color: rgba(255, 255, 255, 0.9);  /* 文字颜色 */
  font-size: 1.2rem;                /* 字体大小 */
}

/* 装饰区域样式 */
.decoration {
  position: absolute;         /* 绝对定位 */
  width: 100%;               /* 宽度占满 */
  height: 100%;              /* 高度占满 */
}

/* 圆形装饰基础样式 */
.circle {
  position: absolute;         /* 绝对定位 */
  border-radius: 50%;        /* 圆形边框 */
  background: rgba(255, 255, 255, 0.1);  /* 半透明背景 */
}

/* 第一个圆形装饰 */
.circle-1 {
  width: 300px;              /* 宽度 */
  height: 300px;             /* 高度 */
  top: -50px;                /* 顶部位置 */
  left: -50px;               /* 左侧位置 */
}

/* 第二个圆形装饰 */
.circle-2 {
  width: 200px;              /* 宽度 */
  height: 200px;             /* 高度 */
  bottom: 50px;              /* 底部位置 */
  right: 50px;               /* 右侧位置 */
}

/* 第三个圆形装饰 */
.circle-3 {
  width: 150px;              /* 宽度 */
  height: 150px;             /* 高度 */
  bottom: 150px;             /* 底部位置 */
  left: 50px;                /* 左侧位置 */
}

/* 右侧区域样式 */
.right-section {
  flex: 1;                   /* 弹性布局占比 */
  display: flex;             /* 使用弹性布局 */
  justify-content: center;   /* 水平居中 */
  align-items: center;       /* 垂直居中 */
  background: #f8fafc;       /* 背景色 */
}

/* 登录框样式 */
.login-box {
  width: 400px;              /* 宽度 */
  padding: 2.5rem;           /* 内边距 */
  background: white;         /* 背景色 */
  border-radius: 16px;       /* 圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);  /* 阴影效果 */
}

/* 标题样式 */
h2 {
  text-align: center;        /* 文字居中 */
  color: #2c3e50;           /* 文字颜色 */
  font-size: 1.8rem;        /* 字体大小 */
  font-weight: 600;         /* 字体粗细 */
  margin-bottom: 0.5rem;    /* 底部外边距 */
}

/* 副标题样式 */
.subtitle {
  text-align: center;        /* 文字居中 */
  color: #64748b;           /* 文字颜色 */
  margin-bottom: 2rem;      /* 底部外边距 */
}

/* 输入框组样式 */
.input-group {
  position: relative;        /* 相对定位 */
  margin-bottom: 1.5rem;    /* 底部外边距 */
}

/* 输入框标签样式 */
.input-group label {
  position: absolute;        /* 绝对定位 */
  left: 15px;               /* 左侧位置 */
  top: 50%;                 /* 顶部位置 */
  transform: translateY(-50%);  /* 垂直居中 */
  color: #64748b;           /* 文字颜色 */
}

/* 图标样式 */
.input-group i {
  font-size: 1.2rem;        /* 字体大小 */
}

/* 输入框样式 */
input {
  width: 100%;              /* 宽度占满 */
  padding: 1rem 1rem 1rem 2.8rem;  /* 内边距 */
  border: 2px solid #e2e8f0;  /* 边框 */
  border-radius: 8px;       /* 圆角 */
  font-size: 1rem;          /* 字体大小 */
  transition: all 0.3s ease;  /* 过渡效果 */
  background: white;        /* 背景色 */
}

/* 输入框焦点样式 */
input:focus {
  border-color: #a18cd1;    /* 边框颜色 */
  outline: none;            /* 移除轮廓 */
  box-shadow: 0 0 0 3px rgba(161, 140, 209, 0.1);  /* 阴影效果 */
}

/* 记住密码和忘记密码区域样式 */
.remember-forgot {
  display: flex;            /* 使用弹性布局 */
  justify-content: space-between;  /* 两端对齐 */
  align-items: center;      /* 垂直居中 */
  margin-bottom: 1.5rem;    /* 底部外边距 */
}

/* 记住密码选项样式 */
.remember {
  display: flex;            /* 使用弹性布局 */
  align-items: center;      /* 垂直居中 */
  gap: 0.5rem;             /* 间距 */
  color: #64748b;          /* 文字颜色 */
  cursor: pointer;         /* 鼠标指针 */
}

/* 复选框样式 */
.remember input[type="checkbox"] {
  width: auto;              /* 自动宽度 */
  margin: 0;                /* 外边距 */
}

/* 忘记密码链接样式 */
.forgot {
  color: #a18cd1;           /* 文字颜色 */
  text-decoration: none;    /* 移除下划线 */
  font-size: 0.9rem;        /* 字体大小 */
  transition: color 0.3s ease;  /* 过渡效果 */
}

/* 忘记密码链接悬停样式 */
.forgot:hover {
  color: #fbc2eb;           /* 悬停时的文字颜色 */
}

/* 登录按钮样式 */
.login-btn {
  width: 100%;              /* 宽度占满 */
  padding: 1rem;            /* 内边距 */
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);  /* 渐变背景 */
  color: white;             /* 文字颜色 */
  border: none;             /* 移除边框 */
  border-radius: 8px;       /* 圆角 */
  cursor: pointer;          /* 鼠标指针 */
  font-size: 1.1rem;        /* 字体大小 */
  font-weight: 600;         /* 字体粗细 */
  transition: all 0.3s ease;  /* 过渡效果 */
}

/* 登录按钮悬停样式 */
.login-btn:hover {
  transform: translateY(-2px);  /* 上移效果 */
  box-shadow: 0 5px 15px rgba(161, 140, 209, 0.4);  /* 阴影效果 */
}

/* 登录按钮点击样式 */
.login-btn:active {
  transform: translateY(0);  /* 恢复位置 */
}

/* Logo 悬浮动画 */
@keyframes float {
  0% { transform: translateY(0px); }     /* 初始位置 */
  50% { transform: translateY(-10px); }  /* 最高位置 */
  100% { transform: translateY(0px); }   /* 返回初始位置 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    flex-direction: column;  /* 改为垂直布局 */
  }
  
  .left-section {
    padding: 2rem 1rem;      /* 调整内边距 */
  }
  
  .right-section {
    padding: 2rem 1rem;      /* 调整内边距 */
  }
  
  .login-box {
    width: 100%;             /* 宽度占满 */
    max-width: 400px;        /* 最大宽度 */
  }
  
  .brand h1 {
    font-size: 2rem;         /* 调整字体大小 */
  }
  
  .slogan {
    font-size: 1rem;         /* 调整字体大小 */
  }
}
</style> 